<template>
  <div class="container home_page">
    <div class="user_box bg_f">
      <UserItem :info="defaultUser"  :pageType="'home'"></UserItem>
    </div>
    <GetType></GetType>
    <NewGoodList :goodList='goodList' v-on:delGood="del"></NewGoodList>
    <ImgList v-on:subImg="subImg" :showActive='showActive' :clear='clear'></ImgList>
    <div class="fixed_btn flex flex-between foot_btn">
      <p @click.stop="addOrder" style="background-color:#FF0036">下单</p>
      <p @click.stop="showModal">添加图片</p>
    </div>
    <EditGood v-on:checkGood='checkGood'></EditGood>
  </div>
</template>
<script>
  import card from "@/components/card";
  import FormInfo from "@/components/FormInfo";
  import UserItem from "@/components/UserItem";
  import GetType from "@/components/GetType";
  import EditGood from "@/components/EditGood";
  import Picker from "@/components/Picker";
  import GoodList from "@/components/GoodList";
  import NewGoodList from "@/components/NewGoodList";
  import ImgList from "@/components/ImgList";
  import api from "@/utils/api";
  import { mapGetters } from "vuex";
  import store from "../../store/index.js";
  export default {
    data() {
      return {
        formData: {
          // address: "", //收货地址
          // cardNum: "", //身份证号
          customerContactId: '', //收货人id
          delivery: "1", //交货方式
          door: "", //上门地址
          isDoor: 1, //是否上门
          notice: 1, //是否通知收货1是
          // orderId: "",
          orderProducts: [],
          payStatus: "", //付款状态
          receivables: "", //请选择收款类型
          refundAsk: "", //回单要求
          refundRemark: "", //回单备注
          remark: "" ,//备注
          images:[],//客户下单最多6张图
        },
        getType: [
          "自提",
          "送货",
          "送货卸货"
        ],
        // 市内收货",
        //   "司机直达",
        //   "送货",
        //   "送货上楼",
        //   "送货卸货",
        //   "网点直达",
        userInfo: {},
        isSHow1: false,
        goodList: [],
        clear:false,
        showActive:false
      };
    },

    components: {
      card,
      FormInfo,
      UserItem,
      GetType,
      EditGood,
      Picker,
      GoodList,
      ImgList,
      NewGoodList
    },
    async mounted() {
      wx.showShareMenu({
        withShareTicket: true
      })
    },
    onShow() {
      if (this.defaultUser && this.defaultUser.id) {
        return
      } else {
        this.getList();
      }
    },
    methods: {
      subImg(data){
        console.log('this.subImg',data)
        this.formData.images=data
      },
      checkAll(data) {
        let fd = {
          customerContactId: data.customerContactId,
          delivery: data.delivery,
          orderProducts: data.orderProducts.length > 0 ? data.orderProducts : '',
        }
        let errMsg = ''
        var index = 0
        Object.keys(fd).forEach((key) => {
          if (!fd[key]) index++;
        })
        if(fd.delivery=='0'){
            index++
        }
        if(data.isDoor){
          if(!data.door){
            index++
          }
        }
          // door: data.door,

        if (index > 0) {
          this.toastError('请填写必填项')
          return false
        } else {
          return true
        }
      },
      addOrder() {
        let option = this.orderData;
        option.orderProducts = this.goodList;
        option.images=this.formData.images
        option.customerContactId = this.defaultUser.id

        console.log("参数", option);
        if (!this.checkAll(option)) return;
        api.customer
          .OrderMpCreate(option)
          .then(res => {
            console.log("下单", res);
            if (res && res.code == 0) {
              this.$store.dispatch('setOrderData', { type: 'reset' })
              this.goodList = []
              this.formData.images=[]
              this.toastSuccess(res.msg)
              this.clear=!this.clear
            } else {
              this.toastError(res.msg)
            }
          })
          .catch(err => {
            console.log("err", err);
            this.toastError('网络繁忙！')
          });
      },
      getList() {
        let option = {
          pageIndex: 1,
          pageSize: 10
        }
        console.log("参数", option);
        api.customerContact
          .List(option)
          .then(res => {
            console.log("联系人列表", res);
            if (res && res.code == 0) {
              let { data, total } = res.data;
              // this.list = data;
              this.$store.dispatch("setUserInfo", data[0])
            }
          })
          .catch(err => {
            console.log("err", err);
          });
      },


      checkGood(data) {
        this.isSHow1 = false;
        if (data) {
          this.goodList.push(data);
        }
      },
      del(n) {
        this.goodList.splice(n, 1);
      },

      showModal() {
        this.showActive=!this.showActive
        // this.$store.dispatch("setModal", true);
      },
    },
    computed: {
      ...mapGetters({ isShow: "isShow", orderData: "orderData", defaultUser: 'defaultUser' })
    },
  };
</script>

<style scoped>
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }

  .usermotto {
    margin-top: 150px;
  }

  .form-control {
    display: block;
    padding: 0 12px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
  }

  .counter {
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }

  .home_page {
    background-color: #f8f8f8;
    padding-bottom: 50px;
    min-height: 100vh;
  }

  .user_box {
    padding: 15px;
  }

  .addBtn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #eee;
  }

  .add_order {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .foot_btn p {
    text-align: center;
    width: 50%;
  }
</style>
